<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--layui-->
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">

    <!--layui修改样式-->
    <link rel="stylesheet" th:href="@{/static/styles/layui-alter.css}">
    <!--center样式-->
    <link rel="stylesheet" th:href="@{/static/styles/center.css }" href="/static/styles/center.css">

    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        .info {
            z-index: 999;
            width: auto;
            min-width: 22rem;
            padding: .75rem 1.25rem;
            margin-left: 1.25rem;
            position: fixed;
            top: 1rem;
            background-color: #fff;
            border-radius: .25rem;
            font-size: 14px;
            font-family: 微软雅黑;
            color: #666;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=F2YGruqvN0L4KF0ccwwVGG5eIfQdOYsj"></script>
    <script th:src="@{/static/scripts/BaiduMap_cityCenter.js }"></script>
</head>
<body>
<div class="info">
    <form action="" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">所属分站</label>
            <div class="layui-input-inline">
                <select name="substId" lay-filter="substId">
                    <option value=""></option>
                </select>
            </div>
            <label class="layui-form-label">司机</label>
            <div class="layui-input-inline">
                <select name="carNumber" lay-filter="carNumber">
                    <option value=""></option>
                </select>
            </div>
        </div>


    </form>
</div>
<div id="container"></div>

<script th:src="@{../static/layui/layui.js }"></script>
<script>
    layui.use(['element', 'layer', 'form', 'jquery'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;


        var map = new BMapGL.Map('container'); // 创建Map实例
        map.centerAndZoom('北京市', 12); // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
        //加载车辆图标
        var carIcon = new BMapGL.Icon("/static/images/car.png", new BMapGL.Size(52, 50));
        //检索路线
        var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});

        var cityName = "";
        //加载分站下拉框
        loadSubstList("substId");
        form.on('select(substId)', function(data){
            map.clearOverlays();
            driving.clearResults();
            cityName = data.elem[data.elem.selectedIndex].text;
            var point = loadPoint(cityName);
            var marker = new BMapGL.Marker(point);
            map.addOverlay(marker);
            theLocation(point);
            pointEvent("千峰物流",cityName,marker,point);
            loadCarDriverList(data.value);
        })



        //司机下拉后查询是否有正在对应的运输
        form.on('select(carNumber)',function (data) {
            if (cityName == ""){
                return null;
            }

            var driverName = data.elem[data.elem.selectedIndex].text;
            map.clearOverlays();
            driving.clearResults();
            $.ajax({
                url: "/queryDriverNowRoute",
                type: "POST",
                dataType: "json",
                data: {
                    carNumber: data.value
                },
                success: function (data) {
                    console.log(data);
                    var startCity = data['transStarting'];
                    var reachCity = data['transReachCity'];
                    if (typeof(startCity) != "undefined" && startCity != "" && startCity != null){
                        var p1 = loadPoint(startCity);
                        var p2 = loadPoint(reachCity);
                        driving.search(p1, p2);
                        var marker1 = new BMapGL.Marker(p1,{icon: carIcon});
                        var marker2 = new BMapGL.Marker(p2);
                        map.addOverlay(marker1,marker2);
                        pointEvent("千峰物流-运输中","分站："+startCity+"<br/>司机："+driverName+"<br/>路线："+startCity+"-->"+reachCity,marker1,p1);
                        theLocation(p1);
                    }else {
                        var point = loadPoint(cityName);
                        var marker = new BMapGL.Marker(point,{icon: carIcon});
                        map.addOverlay(marker);
                        pointEvent("千峰物流","分站："+cityName+"<br/>司机："+driverName,marker,point);
                        theLocation(point);
                    }
                }
            });
        })

        /**
        * 点信息展示
        *@param title
        *@param info
        *@param marker
        *@param point
        */
        function pointEvent(title,info,marker,point) {
            // 创建信息窗口
            var opts = {
                width: 200,
                height: 250,
                title: title
            };
            var infoWindow = new BMapGL.InfoWindow(info, opts);
            // 点标记添加点击事件
            marker.addEventListener('click', function () {
                map.openInfoWindow(infoWindow, point); // 开启信息窗口
            });
        }

        /**
        * 根据城市名加载point
        */
        function loadPoint(cityName) {
            var pointStr;
            var point;
            if (cityName == ""){
                return null;
            }

            for (var i = 0; i < cityCenterS['municipalities'].length; i++) {
                if (cityName.indexOf(cityCenterS['municipalities'][i]['n']) != -1){
                    pointStr = cityCenterS['municipalities'][i]['g'];
                }
            }
            for (var i = 0; i < cityCenterS['other'].length; i++) {
                if (cityName.indexOf(cityCenterS['other'][i]['n']) != -1){
                    pointStr = cityCenterS['other'][i]['g'];
                }
            }
            for (var i = 0; i < cityCenterS['provinces'].length; i++) {
                var provinces = cityCenterS['provinces'][i];
                for (var j = 0; j < provinces['cities'].length; j++) {
                    if (cityName.indexOf(provinces['cities'][j]['n']) != -1){
                        pointStr = provinces['cities'][j]['g'];
                    }
                }
            }
            if (typeof(pointStr) != "undefined"){
                var points = pointStr.trim().split(",");
                point = new BMapGL.Point(parseFloat(points[0]),parseFloat(points[1]));
            }
            return point;
        }

        //定位地图中心位置
        function theLocation(point){
            if(typeof(point) != "undefined" && point != ""){
                map.centerAndZoom(point);
            }
        }
        






        /**
         * 加载--分站--下拉框列表的方法
         * @param selectName 下拉框name,可以是str类型和arr类型
         */
        function loadSubstList(selectName) {
            $.ajax({
                type: "POST",
                url: "/getSubstationListFS",
                success: function (data) {
                    console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        var li = "<option value='" + data[i]['substId'] + "' data-address='" + data[i]['substAddress'] + "'> " + data[i]['substName'] + "</option>";
                        if (typeof selectName == "string") {
                            $("select[name='" + selectName + "']").append(li);
                        } else if (typeof selectName != "undefined") {
                            for (var j = 0; j < selectName.length; j++) {
                                $("select[name='" + selectName[j] + "']").append(li);
                            }
                        }
                    }
                    form.render("select");
                }
            });
        }

        /**
         * 加载substId对应分站的司机列表下拉框
         * @param substId 分站id
         */
        function loadCarDriverList(substId) {
            $("select[name='carNumber']").children().remove();
            $.ajax({
                type: "POST",
                url: "/queryCarsBySubst",
                data: {
                    carPartofSubs: substId
                },
                success: function (data) {
                    console.log(data);

                    var optionS = "";
                    if (data.length == 0){
                        $("select[name='carNumber']").append("<option>出发站无司机</option>");
                    } else {
                        optionS += "<option value=''>请选择司机</option>";
                    }

                    for (var i = 0; i < data.length; i++) {
                        optionS += "<option value='"+data[i]["carNumber"]+"'>"+data[i]["carDriver"]+"</option>";
                    }
                    $("select[name='carNumber']").append(optionS);
                    form.render("select");
                }
            });
        }
    })

</script>
</body>
</html>
